<template>
  <el-form ref="loginFormRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
    <el-form-item prop="phone">
      <el-input v-model="form.phone" prefix-icon="el-icon-iphone" clearable
                :placeholder="t('login.mobilePlaceholder')">
        <template #prepend>+86</template>
      </el-input>
    </el-form-item>
    <el-form-item prop="yzm" style="margin-bottom: 35px;">
      <div class="login-msg-yzm">
        <el-input v-model="form.yzm" prefix-icon="el-icon-unlock" clearable
                  :placeholder="t('login.smsPlaceholder')"></el-input>
        <el-button @click="getYzm" :disabled="disabled">{{ t('login.smsGet') }}<span
            v-if="disabled"> ({{ time }})</span></el-button>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{
          t('login.signIn')
        }}
      </el-button>
    </el-form-item>
    <div class="login-reg">
      {{ t('login.noAccount') }}
      <router-link to="/user_register">{{ t('login.createAccount') }}</router-link>
    </div>
  </el-form>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useI18n} from "vue-i18n";

const {t} = useI18n()

let form = reactive({
  phone: "",
  yzm: "",
})
const rules = reactive({
  phone: [
    {required: true, message: t('login.mobileError')}
  ],
  yzm: [
    {required: true, message: t('login.smsError')}
  ]
})
let disabled = ref(false)
let time = ref(0)
let islogin = ref(false)


let loginFormRef = ref()


const getYzm = async () => {
  let validate = await loginFormRef.value.validateField("phone").catch(() => {
  });
  if (!validate) {
    return false
  }

  ElMessage.success(t('login.smsSent'))
  disabled.value = true
  time.value = 60
  let ti = setInterval(() => {
    time.value -= 1
    if (time.value < 1) {
      clearInterval(ti)
      disabled.value = false
      time.value = 0
    }
  }, 1000);
}
const login = async () => {
  let validate = await loginFormRef.value.validate().catch(() => {
  });
  if (!validate) {
    return false
  }
}

</script>

<style>

</style>
